<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>在线批卷工作台</title>
    <script src="https://res.gemcoder.com/js/reload.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <link
      href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css"
      rel="stylesheet"
    />
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              primary: '#165DFF',
              secondary: '#36CFC9',
              success: '#52C41A',
              warning: '#FAAD14',
              danger: '#FF4D4F',
              info: '#1890FF',
              light: '#F5F5F5',
              dark: '#141414',
              'neutral-100': '#F9FAFB',
              'neutral-200': '#F4F6F8',
              'neutral-300': '#DFE3E8',
              'neutral-400': '#C9CDD4',
              'neutral-500': '#86909C',
              'neutral-600': '#4E5969',
              'neutral-700': '#272E3B',
              'neutral-800': '#1D2129'
            },
            fontFamily: {
              inter: ['Inter', 'system-ui', 'sans-serif']
            },
            boxShadow: {
              'card': '0 2px 8px rgba(0, 0, 0, 0.08)',
              'dropdown': '0 4px 16px rgba(0, 0, 0, 0.12)',
              'hover': '0 4px 12px rgba(0, 0, 0, 0.1)'
            }
          }
        }
      };
    </script>
    <style type="text/tailwindcss">
      @layer utilities {
          .content-auto {
              content-visibility: auto;
          }
          .scrollbar-hide {
              -ms-overflow-style: none;
              scrollbar-width: none;
          }
          .scrollbar-hide::-webkit-scrollbar {
              display: none;
          }
          .text-shadow {
              text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
          }
          .transition-height {
              transition: max-height 0.3s ease-in-out;
          }
          .bg-grid {
              background-size: 20px 20px;
              background-image:
                  linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
                  linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
          }
      }
    </style>
  </head>
  <body
    class="font-inter bg-neutral-100 text-neutral-800 min-h-screen flex flex-col"
  >
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50">
      <div
        class="container mx-auto px-4 py-3 flex items-center justify-between"
      >
        <div class="flex items-center space-x-4">
          <div class="text-primary text-2xl font-bold flex items-center">
            <i class="fas fa-clipboard-check mr-2"> </i>
            <span> 智能批卷工作台 </span>
          </div>
          <div class="hidden md:flex items-center space-x-6 ml-8">
            <a
              href="javascript:void(0);"
              class="text-primary font-medium flex items-center"
            >
              <i class="fas fa-home mr-1"> </i>
              首页
            </a>
            <a
              href="javascript:void(0);"
              class="text-neutral-600 hover:text-primary transition-colors flex items-center"
            >
              <i class="fas fa-tasks mr-1"> </i>
              任务管理
            </a>
            <a
              href="javascript:void(0);"
              class="text-neutral-600 hover:text-primary transition-colors flex items-center"
            >
              <i class="fas fa-chart-bar mr-1"> </i>
              统计分析
            </a>
            <a
              href="javascript:void(0);"
              class="text-neutral-600 hover:text-primary transition-colors flex items-center"
            >
              <i class="fas fa-cog mr-1"> </i>
              设置
            </a>
          </div>
        </div>
        <div class="flex items-center space-x-4">
          <div class="relative hidden md:block">
            <input
              type="text"
              placeholder="搜索考生、试卷..."
              class="pl-10 pr-4 py-2 rounded-lg border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary w-64 transition-all"
            />
            <i
              class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-500"
            >
            </i>
          </div>
          <div class="relative">
            <button
              id="notificationBtn"
              class="relative p-2 rounded-full hover:bg-neutral-200 transition-colors"
            >
              <i class="fas fa-bell text-lg text-neutral-600"> </i>
              <span
                class="absolute top-1 right-1 w-2 h-2 bg-danger rounded-full"
              >
              </span>
            </button>
          </div>
          <div class="relative">
            <button
              id="profileBtn"
              class="flex items-center space-x-2 p-1 rounded-full hover:bg-neutral-200 transition-colors"
            >
              <img
                src="https://design.gemcoder.com/staticResource/echoAiSystemImages/f8c4191cbcaae540334be3f27c25bdb5.png"
                alt="用户头像"
                class="w-8 h-8 rounded-full object-cover border-2 border-white shadow-sm"
              />
              <span class="hidden md:inline font-medium"> 王老师 </span>
              <i class="fas fa-chevron-down text-xs text-neutral-500"> </i>
            </button>
          </div>
        </div>
      </div>
    </header>
    <!-- 主内容区 -->
    <main class="flex-1 flex overflow-hidden">
      <!-- 左侧：考生列表区 (25%) -->
      <section
        class="w-1/4 bg-white border-r border-neutral-300 flex flex-col h-[calc(100vh-64px)]"
      >
        <!-- 筛选工具栏 -->
        <div class="p-4 border-b border-neutral-300">
          <div class="flex items-center justify-between mb-3">
            <h2 class="text-lg font-semibold">考生列表</h2>
            <div class="flex space-x-2">
              <button
                class="p-2 rounded-lg hover:bg-neutral-200 transition-colors"
                title="刷新列表"
              >
                <i class="fas fa-sync-alt text-neutral-600"> </i>
              </button>
              <button
                class="p-2 rounded-lg hover:bg-neutral-200 transition-colors"
                title="列表设置"
              >
                <i class="fas fa-cog text-neutral-600"> </i>
              </button>
            </div>
          </div>
          <div class="space-y-3">
            <div class="flex space-x-2">
              <select
                class="flex-1 rounded-lg border border-neutral-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary"
              >
                <option>全部班级</option>
                <option>高三(1)班</option>
                <option>高三(2)班</option>
                <option>高三(3)班</option>
                <option>高三(4)班</option>
              </select>
              <select
                class="flex-1 rounded-lg border border-neutral-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary"
              >
                <option>全部状态</option>
                <option>未批改</option>
                <option>部分批改</option>
                <option>已完成</option>
              </select>
            </div>
            <div class="relative">
              <input
                type="text"
                placeholder="搜索考生..."
                class="w-full pl-10 pr-4 py-2 rounded-lg border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary"
              />
              <i
                class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-500"
              >
              </i>
            </div>
            <div
              class="flex items-center justify-between text-sm text-neutral-600"
            >
              <div>
                共
                <span class="font-semibold text-primary"> 128 </span>
                名考生
              </div>
              <div class="flex space-x-2">
                <button
                  class="px-2 py-1 rounded hover:bg-neutral-200 transition-colors active bg-neutral-200"
                >
                  <i class="fas fa-list"> </i>
                </button>
                <button
                  class="px-2 py-1 rounded hover:bg-neutral-200 transition-colors"
                >
                  <i class="fas fa-th"> </i>
                </button>
              </div>
            </div>
          </div>
        </div>
        <!-- 考生列表 -->
        <div class="flex-1 overflow-y-auto scrollbar-hide">
          <div class="divide-y divide-neutral-200">
            <!-- 考生项 - 当前选中 -->
            <div
              class="p-3 bg-primary/5 border-l-4 border-primary hover:bg-primary/10 transition-colors cursor-pointer"
            >
              <div class="flex items-start justify-between">
                <div class="flex items-start space-x-3">
                  <img
                    src="https://design.gemcoder.com/staticResource/echoAiSystemImages/f22dae99db5b5a2c3c43d6541b76b2b1.png"
                    alt="考生头像"
                    class="w-10 h-10 rounded-full object-cover"
                  />
                  <div>
                    <div class="flex items-center space-x-2">
                      <h3 class="font-medium">张明</h3>
                      <span
                        class="text-xs px-2 py-0.5 bg-warning/20 text-warning rounded-full"
                      >
                        部分批改
                      </span>
                    </div>
                    <div class="text-sm text-neutral-600">
                      高三(1)班 | 考号: 202301001
                    </div>
                    <div class="flex items-center mt-1 space-x-3 text-sm">
                      <span class="flex items-center text-neutral-600">
                        <i class="fas fa-clock-o mr-1"> </i>
                        09:42提交
                      </span>
                      <span class="flex items-center font-medium text-primary">
                        总分: 68/100
                      </span>
                    </div>
                  </div>
                </div>
                <div class="flex flex-col items-end">
                  <div class="flex space-x-1">
                    <span
                      class="w-6 h-6 flex items-center justify-center rounded bg-success/20 text-success text-xs"
                    >
                      1
                    </span>
                    <span
                      class="w-6 h-6 flex items-center justify-center rounded bg-success/20 text-success text-xs"
                    >
                      2
                    </span>
                    <span
                      class="w-6 h-6 flex items-center justify-center rounded bg-warning/20 text-warning text-xs"
                    >
                      3
                    </span>
                    <span
                      class="w-6 h-6 flex items-center justify-center rounded bg-neutral-200 text-neutral-500 text-xs"
                    >
                      4
                    </span>
                    <span
                      class="w-6 h-6 flex items-center justify-center rounded bg-neutral-200 text-neutral-500 text-xs"
                    >
                      5
                    </span>
                  </div>
                  <span class="text-xs text-neutral-500 mt-1">
                    5题/2题未批
                  </span>
                </div>
              </div>
            </div>
            <!-- 考生项 - 未批改 -->
            <div
              class="p-3 hover:bg-neutral-100 transition-colors cursor-pointer"
            >
              <div class="flex items-start justify-between">
                <div class="flex items-start space-x-3">
                  <img
                    src="https://design.gemcoder.com/staticResource/echoAiSystemImages/f22dae99db5b5a2c3c43d6541b76b2b1.png"
                    alt="考生头像"
                    class="w-10 h-10 rounded-full object-cover"
                  />
                  <div>
                    <div class="flex items-center space-x-2">
                      <h3 class="font-medium">李华</h3>
                      <span
                        class="text-xs px-2 py-0.5 bg-neutral-200 text-neutral-600 rounded-full"
                      >
                        未批改
                      </span>
                    </div>
                    <div class="text-sm text-neutral-600">
                      高三(1)班 | 考号: 202301002
                    </div>
                    <div class="flex items-center mt-1 space-x-3 text-sm">
                      <span class="flex items-center text-neutral-600">
                        <i class="fas fa-clock-o mr-1"> </i>
                        09:35提交
                      </span>
                      <span class="flex items-center text-neutral-500">
                        总分: --/100
                      </span>
                    </div>
                  </div>
                </div>
                <div class="flex flex-col items-end">
                  <div class="flex space-x-1">
                    <span
                      class="w-6 h-6 flex items-center justify-center rounded bg-neutral-200 text-neutral-500 text-xs"
                    >
                      1
                    </span>
                    <span
                      class="w-6 h-6 flex items-center justify-center rounded bg-neutral-200 text-neutral-500 text-xs"
                    >
                      2
                    </span>
                    <span
                      class="w-6 h-6 flex items-center justify-center rounded bg-neutral-200 text-neutral-500 text-xs"
                    >
                      3
                    </span>
                    <span
                      class="w-6 h-6 flex items-center justify-center rounded bg-neutral-200 text-neutral-500 text-xs"
                    >
                      4
                    </span>
                    <span
                      class="w-6 h-6 flex items-center justify-center rounded bg-neutral-200 text-neutral-500 text-xs"
                    >
                      5
                    </span>
                  </div>
                  <span class="text-xs text-neutral-500 mt-1">
                    5题/5题未批
                  </span>
                </div>
              </div>
            </div>
            <!-- 考生项 - 已完成 -->
            <div
              class="p-3 hover:bg-neutral-100 transition-colors cursor-pointer"
            >
              <div class="flex items-start justify-between">
                <div class="flex items-start space-x-3">
                  <img
                    src="https://design.gemcoder.com/staticResource/echoAiSystemImages/f22dae99db5b5a2c3c43d6541b76b2b1.png"
                    alt="考生头像"
                    class="w-10 h-10 rounded-full object-cover"
                  />
                  <div>
                    <div class="flex items-center space-x-2">
                      <h3 class="font-medium">王芳</h3>
                      <span
                        class="text-xs px-2 py-0.5 bg-success/20 text-success rounded-full"
                      >
                        已完成
                      </span>
                    </div>
                    <div class="text-sm text-neutral-600">
                      高三(2)班 | 考号: 202301003
                    </div>
                    <div class="flex items-center mt-1 space-x-3 text-sm">
                      <span class="flex items-center text-neutral-600">
                        <i class="fas fa-clock-o mr-1"> </i>
                        09:20提交
                      </span>
                      <span class="flex items-center font-medium text-success">
                        总分: 85/100
                      </span>
                    </div>
                  </div>
                </div>
                <div class="flex flex-col items-end">
                  <div class="flex space-x-1">
                    <span
                      class="w-6 h-6 flex items-center justify-center rounded bg-success/20 text-success text-xs"
                    >
                      1
                    </span>
                    <span
                      class="w-6 h-6 flex items-center justify-center rounded bg-success/20 text-success text-xs"
                    >
                      2
                    </span>
                    <span
                      class="w-6 h-6 flex items-center justify-center rounded bg-success/20 text-success text-xs"
                    >
                      3
                    </span>
                    <span
                      class="w-6 h-6 flex items-center justify-center rounded bg-success/20 text-success text-xs"
                    >
                      4
                    </span>
                    <span
                      class="w-6 h-6 flex items-center justify-center rounded bg-success/20 text-success text-xs"
                    >
                      5
                    </span>
                  </div>
                  <span class="text-xs text-neutral-500 mt-1">
                    5题/0题未批
                  </span>
                </div>
              </div>
            </div>
            <!-- 考生项 - 部分批改 -->
            <div
              class="p-3 hover:bg-neutral-100 transition-colors cursor-pointer"
            >
              <div class="flex items-start justify-between">
                <div class="flex items-start space-x-3">
                  <img
                    src="https://design.gemcoder.com/staticResource/echoAiSystemImages/f22dae99db5b5a2c3c43d6541b76b2b1.png"
                    alt="考生头像"
                    class="w-10 h-10 rounded-full object-cover"
                  />
                  <div>
                    <div class="flex items-center space-x-2">
                      <h3 class="font-medium">赵强</h3>
                      <span
                        class="text-xs px-2 py-0.5 bg-warning/20 text-warning rounded-full"
                      >
                        部分批改
                      </span>
                    </div>
                    <div class="text-sm text-neutral-600">
                      高三(3)班 | 考号: 202301004
                    </div>
                    <div class="flex items-center mt-1 space-x-3 text-sm">
                      <span class="flex items-center text-neutral-600">
                        <i class="fas fa-clock-o mr-1"> </i>
                        09:15提交
                      </span>
                      <span class="flex items-center font-medium text-primary">
                        总分: 42/100
                      </span>
                    </div>
                  </div>
                </div>
                <div class="flex flex-col items-end">
                  <div class="flex space-x-1">
                    <span
                      class="w-6 h-6 flex items-center justify-center rounded bg-success/20 text-success text-xs"
                    >
                      1
                    </span>
                    <span
                      class="w-6 h-6 flex items-center justify-center rounded bg-neutral-200 text-neutral-500 text-xs"
                    >
                      2
                    </span>
                    <span
                      class="w-6 h-6 flex items-center justify-center rounded bg-success/20 text-success text-xs"
                    >
                      3
                    </span>
                    <span
                      class="w-6 h-6 flex items-center justify-center rounded bg-neutral-200 text-neutral-500 text-xs"
                    >
                      4
                    </span>
                    <span
                      class="w-6 h-6 flex items-center justify-center rounded bg-neutral-200 text-neutral-500 text-xs"
                    >
                      5
                    </span>
                  </div>
                  <span class="text-xs text-neutral-500 mt-1">
                    5题/3题未批
                  </span>
                </div>
              </div>
            </div>
            <!-- 考生项 - 部分批改 -->
            <div
              class="p-3 hover:bg-neutral-100 transition-colors cursor-pointer"
            >
              <div class="flex items-start justify-between">
                <div class="flex items-start space-x-3">
                  <img
                    src="https://design.gemcoder.com/staticResource/echoAiSystemImages/f22dae99db5b5a2c3c43d6541b76b2b1.png"
                    alt="考生头像"
                    class="w-10 h-10 rounded-full object-cover"
                  />
                  <div>
                    <div class="flex items-center space-x-2">
                      <h3 class="font-medium">陈静</h3>
                      <span
                        class="text-xs px-2 py-0.5 bg-warning/20 text-warning rounded-full"
                      >
                        部分批改
                      </span>
                    </div>
                    <div class="text-sm text-neutral-600">
                      高三(1)班 | 考号: 202301005
                    </div>
                    <div class="flex items-center mt-1 space-x-3 text-sm">
                      <span class="flex items-center text-neutral-600">
                        <i class="fas fa-clock-o mr-1"> </i>
                        09:10提交
                      </span>
                      <span class="flex items-center font-medium text-primary">
                        总分: 76/100
                      </span>
                    </div>
                  </div>
                </div>
                <div class="flex flex-col items-end">
                  <div class="flex space-x-1">
                    <span
                      class="w-6 h-6 flex items-center justify-center rounded bg-success/20 text-success text-xs"
                    >
                      1
                    </span>
                    <span
                      class="w-6 h-6 flex items-center justify-center rounded bg-success/20 text-success text-xs"
                    >
                      2
                    </span>
                    <span
                      class="w-6 h-6 flex items-center justify-center rounded bg-success/20 text-success text-xs"
                    >
                      3
                    </span>
                    <span
                      class="w-6 h-6 flex items-center justify-center rounded bg-success/20 text-success text-xs"
                    >
                      4
                    </span>
                    <span
                      class="w-6 h-6 flex items-center justify-center rounded bg-neutral-200 text-neutral-500 text-xs"
                    >
                      5
                    </span>
                  </div>
                  <span class="text-xs text-neutral-500 mt-1">
                    5题/1题未批
                  </span>
                </div>
              </div>
            </div>
            <!-- 考生项 - 未批改 -->
            <div
              class="p-3 hover:bg-neutral-100 transition-colors cursor-pointer"
            >
              <div class="flex items-start justify-between">
                <div class="flex items-start space-x-3">
                  <img
                    src="https://design.gemcoder.com/staticResource/echoAiSystemImages/f22dae99db5b5a2c3c43d6541b76b2b1.png"
                    alt="考生头像"
                    class="w-10 h-10 rounded-full object-cover"
                  />
                  <div>
                    <div class="flex items-center space-x-2">
                      <h3 class="font-medium">刘伟</h3>
                      <span
                        class="text-xs px-2 py-0.5 bg-neutral-200 text-neutral-600 rounded-full"
                      >
                        未批改
                      </span>
                    </div>
                    <div class="text-sm text-neutral-600">
                      高三(2)班 | 考号: 202301006
                    </div>
                    <div class="flex items-center mt-1 space-x-3 text-sm">
                      <span class="flex items-center text-neutral-600">
                        <i class="fas fa-clock-o mr-1"> </i>
                        09:05提交
                      </span>
                      <span class="flex items-center text-neutral-500">
                        总分: --/100
                      </span>
                    </div>
                  </div>
                </div>
                <div class="flex flex-col items-end">
                  <div class="flex space-x-1">
                    <span
                      class="w-6 h-6 flex items-center justify-center rounded bg-neutral-200 text-neutral-500 text-xs"
                    >
                      1
                    </span>
                    <span
                      class="w-6 h-6 flex items-center justify-center rounded bg-neutral-200 text-neutral-500 text-xs"
                    >
                      2
                    </span>
                    <span
                      class="w-6 h-6 flex items-center justify-center rounded bg-neutral-200 text-neutral-500 text-xs"
                    >
                      3
                    </span>
                    <span
                      class="w-6 h-6 flex items-center justify-center rounded bg-neutral-200 text-neutral-500 text-xs"
                    >
                      4
                    </span>
                    <span
                      class="w-6 h-6 flex items-center justify-center rounded bg-neutral-200 text-neutral-500 text-xs"
                    >
                      5
                    </span>
                  </div>
                  <span class="text-xs text-neutral-500 mt-1">
                    5题/5题未批
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 底部统计 -->
        <div class="p-3 border-t border-neutral-300 bg-white">
          <div class="flex justify-between text-sm">
            <div>
              <span class="text-neutral-600"> 进度： </span>
              <span class="font-medium"> 32/128 </span>
            </div>
            <div class="flex space-x-4">
              <div class="flex items-center">
                <span class="w-3 h-3 rounded-full bg-neutral-200 mr-1"> </span>
                <span class="text-neutral-600"> 96 </span>
              </div>
              <div class="flex items-center">
                <span class="w-3 h-3 rounded-full bg-warning/20 mr-1"> </span>
                <span class="text-warning"> 15 </span>
              </div>
              <div class="flex items-center">
                <span class="w-3 h-3 rounded-full bg-success/20 mr-1"> </span>
                <span class="text-success"> 17 </span>
              </div>
            </div>
          </div>
          <div class="mt-2 h-2 bg-neutral-200 rounded-full overflow-hidden">
            <div
              class="h-full bg-primary rounded-full"
              style="width: 25%"
            ></div>
          </div>
        </div>
      </section>
      <!-- 中间：批改工作区 (50%) -->
      <section
        class="w-1/2 bg-white flex flex-col h-[calc(100vh-64px)] overflow-hidden"
      >
        <!-- 当前考生信息 -->
        <div
          class="p-4 border-b border-neutral-300 flex items-center justify-between bg-white sticky top-0 z-10"
        >
          <div class="flex items-center space-x-4">
            <div>
              <div class="flex items-center space-x-2">
                <h2 class="text-lg font-semibold">张明 (高三(1)班)</h2>
                <span
                  class="text-sm px-2 py-0.5 bg-warning/20 text-warning rounded-full"
                >
                  部分批改
                </span>
              </div>
              <div class="text-sm text-neutral-600">
                考号: 202301001 | 提交时间: 2023-06-15 09:42
              </div>
            </div>
            <div class="hidden md:flex items-center space-x-4 ml-6">
              <div class="text-center">
                <div class="text-sm text-neutral-600">当前总分</div>
                <div class="text-xl font-bold text-primary">
                  68
                  <span class="text-sm font-normal text-neutral-600">
                    /100
                  </span>
                </div>
              </div>
              <div class="text-center">
                <div class="text-sm text-neutral-600">已批题目</div>
                <div class="text-xl font-bold text-success">
                  3
                  <span class="text-sm font-normal text-neutral-600"> /5 </span>
                </div>
              </div>
              <div class="text-center">
                <div class="text-sm text-neutral-600">用时</div>
                <div class="text-xl font-bold text-neutral-800">
                  12
                  <span class="text-sm font-normal text-neutral-600">
                    分钟
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div class="flex space-x-2">
            <button
              class="px-3 py-2 rounded-lg border border-neutral-300 text-neutral-600 hover:bg-neutral-100 transition-colors flex items-center"
            >
              <i class="fas fa-history mr-1"> </i>
              历史
            </button>
            <button
              class="px-3 py-2 rounded-lg bg-primary text-white hover:bg-primary/90 transition-colors flex items-center"
            >
              <i class="fas fa-save mr-1"> </i>
              保存
            </button>
          </div>
        </div>
        <!-- 题目导航 -->
        <div
          class="p-3 border-b border-neutral-300 bg-neutral-50 flex items-center overflow-x-auto scrollbar-hide"
        >
          <div class="flex items-center space-x-1 mr-4">
            <button
              class="px-3 py-1.5 rounded-md bg-primary text-white text-sm font-medium"
            >
              全部题目
            </button>
            <button
              class="px-3 py-1.5 rounded-md hover:bg-neutral-200 text-neutral-600 text-sm transition-colors"
            >
              单选题
            </button>
            <button
              class="px-3 py-1.5 rounded-md hover:bg-neutral-200 text-neutral-600 text-sm transition-colors"
            >
              多选题
            </button>
            <button
              class="px-3 py-1.5 rounded-md hover:bg-neutral-200 text-neutral-600 text-sm transition-colors"
            >
              主观题
            </button>
            <button
              class="px-3 py-1.5 rounded-md hover:bg-neutral-200 text-neutral-600 text-sm transition-colors"
            >
              编程题
            </button>
          </div>
          <div class="flex items-center space-x-1 flex-1">
            <button
              class="w-8 h-8 flex items-center justify-center rounded-md bg-success/20 text-success text-sm font-medium"
            >
              1
            </button>
            <button
              class="w-8 h-8 flex items-center justify-center rounded-md bg-success/20 text-success text-sm font-medium"
            >
              2
            </button>
            <button
              class="w-8 h-8 flex items-center justify-center rounded-md bg-warning/20 text-warning text-sm font-medium ring-2 ring-warning/30"
            >
              3
            </button>
            <button
              class="w-8 h-8 flex items-center justify-center rounded-md bg-neutral-200 text-neutral-600 text-sm font-medium"
            >
              4
            </button>
            <button
              class="w-8 h-8 flex items-center justify-center rounded-md bg-neutral-200 text-neutral-600 text-sm font-medium"
            >
              5
            </button>
            <button
              class="w-8 h-8 flex items-center justify-center rounded-md bg-neutral-200 text-neutral-600 text-sm font-medium"
            >
              6
            </button>
            <button
              class="w-8 h-8 flex items-center justify-center rounded-md bg-neutral-200 text-neutral-600 text-sm font-medium"
            >
              7
            </button>
            <button
              class="w-8 h-8 flex items-center justify-center rounded-md bg-neutral-200 text-neutral-600 text-sm font-medium"
            >
              8
            </button>
            <button
              class="w-8 h-8 flex items-center justify-center rounded-md bg-neutral-200 text-neutral-600 text-sm font-medium"
            >
              9
            </button>
            <button
              class="w-8 h-8 flex items-center justify-center rounded-md bg-neutral-200 text-neutral-600 text-sm font-medium"
            >
              10
            </button>
            <div
              class="w-8 h-8 flex items-center justify-center text-neutral-500"
            >
              ...
            </div>
            <button
              class="w-8 h-8 flex items-center justify-center rounded-md bg-neutral-200 text-neutral-600 text-sm font-medium"
            >
              25
            </button>
          </div>
          <div class="ml-4 flex items-center space-x-2">
            <button
              class="p-2 rounded-lg hover:bg-neutral-200 transition-colors text-neutral-600"
            >
              <i class="fas fa-chevron-left"> </i>
            </button>
            <button
              class="p-2 rounded-lg hover:bg-neutral-200 transition-colors text-neutral-600"
            >
              <i class="fas fa-chevron-right"> </i>
            </button>
          </div>
        </div>
        <!-- 批改工作区 -->
        <div class="flex-1 overflow-y-auto p-4">
          <!-- 当前题目 -->
          <div class="bg-white rounded-xl shadow-card p-5 mb-6">
            <div class="flex justify-between items-start mb-4">
              <div>
                <div class="flex items-center space-x-2 mb-1">
                  <span
                    class="px-2 py-0.5 bg-primary/10 text-primary rounded-md text-sm font-medium"
                  >
                    主观题
                  </span>
                  <span class="text-neutral-600 text-sm"> 第3题 (共5题) </span>
                </div>
                <h3 class="text-lg font-semibold">
                  论述题：请详细阐述计算机网络OSI七层模型的结构及各层功能。
                </h3>
              </div>
              <div
                class="bg-neutral-100 px-3 py-1.5 rounded-lg text-sm font-medium"
              >
                分值：
                <span class="text-primary"> 20分 </span>
              </div>
            </div>
            <div class="mb-6">
              <h4 class="text-neutral-700 font-medium mb-2">考生答案：</h4>
              <div
                class="bg-neutral-50 p-4 rounded-lg border border-neutral-200 min-h-[200px]"
              >
                <p class="mb-2">
                  OSI七层模型是计算机网络中的一个重要概念，它将网络通信分为七个层次，每一层都有其特定的功能。
                </p>
                <p class="mb-2">
                  第一层是物理层，主要负责传输比特流，处理物理介质的连接和信号的传输。
                </p>
                <p class="mb-2">
                  第二层是数据链路层，负责将数据帧从一个节点传输到另一个节点，处理错误检测和纠正。
                </p>
                <p class="mb-2">
                  第三层是网络层，负责路由选择和数据包的转发，实现不同网络之间的通信。
                </p>
                <p class="mb-2">
                  第四层是传输层，提供端到端的可靠数据传输，确保数据的完整性和顺序性。
                </p>
                <p class="mb-2">
                  第五层是会话层，负责建立、管理和终止会话连接。
                </p>
                <p class="mb-2">
                  第六层是表示层，负责数据的格式转换、加密和解密等。
                </p>
                <p>第七层是应用层，直接为用户应用程序提供服务。</p>
                <!-- 批注示例 -->
                <div class="relative mt-4 pl-6 border-l-2 border-warning/50">
                  <div
                    class="absolute -left-3 top-0 w-5 h-5 rounded-full bg-warning/20 flex items-center justify-center text-warning"
                  >
                    <i class="fas fa-comment text-xs"> </i>
                  </div>
                  <div class="bg-warning/10 p-2 rounded text-sm">
                    <span class="font-medium"> 批注： </span>
                    物理层的描述过于简单，应补充具体功能如电压规范、接口标准等。
                  </div>
                </div>
              </div>
            </div>
            <div class="mb-6">
              <h4 class="text-neutral-700 font-medium mb-2">标准答案：</h4>
              <div
                class="bg-neutral-50 p-4 rounded-lg border border-neutral-200 min-h-[200px]"
              >
                <p class="mb-2">
                  OSI（开放系统互连）七层参考模型是国际标准化组织（ISO）提出的网络通信模型，将网络通信过程分为七个层次，每层负责不同的功能：
                </p>
                <ol class="list-decimal pl-5 space-y-2">
                  <li>
                    <span class="font-medium">
                      物理层（Physical Layer）：
                    </span>
                    负责在物理介质上传输原始比特流，定义电压、接口类型、线缆标准等物理特性。
                  </li>
                  <li>
                    <span class="font-medium">
                      数据链路层（Data Link Layer）：
                    </span>
                    负责将数据帧从一个节点传输到相邻节点，提供差错检测与纠正、流量控制和访问控制。
                  </li>
                  <li>
                    <span class="font-medium"> 网络层（Network Layer）： </span>
                    负责数据包的路由选择和转发，实现不同网络之间的通信，主要协议有IP、ICMP等。
                  </li>
                  <li>
                    <span class="font-medium">
                      传输层（Transport Layer）：
                    </span>
                    提供端到端的可靠数据传输服务，包括分段、流量控制、差错恢复等，主要协议有TCP、UDP。
                  </li>
                  <li>
                    <span class="font-medium"> 会话层（Session Layer）： </span>
                    负责建立、管理和终止应用程序之间的会话连接，提供会话同步和恢复功能。
                  </li>
                  <li>
                    <span class="font-medium">
                      表示层（Presentation Layer）：
                    </span>
                    负责数据的格式转换、加密解密、压缩解压等，确保不同系统能正确理解数据格式。
                  </li>
                  <li>
                    <span class="font-medium">
                      应用层（Application Layer）：
                    </span>
                    直接为用户应用程序提供网络服务，如HTTP、FTP、SMTP等协议。
                  </li>
                </ol>
              </div>
            </div>
            <!-- 评分区域 -->
            <div class="bg-neutral-50 p-4 rounded-lg border border-neutral-200">
              <div
                class="flex flex-col md:flex-row md:items-center justify-between gap-4"
              >
                <div class="flex-1">
                  <div class="flex justify-between items-center mb-2">
                    <span class="text-neutral-700 font-medium"> 得分： </span>
                    <div class="flex items-center">
                      <input
                        type="number"
                        value="12"
                        min="0"
                        max="20"
                        class="w-16 text-center py-1.5 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary"
                      />
                      <span class="mx-2 text-neutral-500"> /20 </span>
                    </div>
                  </div>
                  <!-- 评分滑块 -->
                  <input
                    type="range"
                    min="0"
                    max="20"
                    value="12"
                    class="w-full h-2 bg-neutral-200 rounded-lg appearance-none cursor-pointer accent-primary"
                  />
                  <!-- 评分参考线 -->
                  <div
                    class="flex justify-between mt-1 text-xs text-neutral-500"
                  >
                    <span> 0 </span>
                    <span> 5 </span>
                    <span> 10 </span>
                    <span> 15 </span>
                    <span> 20 </span>
                  </div>
                </div>
                <div class="flex space-x-2">
                  <button
                    class="px-3 py-2 rounded-lg border border-neutral-300 text-neutral-600 hover:bg-neutral-100 transition-colors flex items-center"
                  >
                    <i class="fas fa-check-double mr-1"> </i>
                    满分
                  </button>
                  <button
                    class="px-3 py-2 rounded-lg border border-danger text-danger hover:bg-danger/5 transition-colors flex items-center"
                  >
                    <i class="fas fa-times mr-1"> </i>
                    零分
                  </button>
                  <button
                    class="px-3 py-2 rounded-lg bg-primary text-white hover:bg-primary/90 transition-colors flex items-center"
                  >
                    <i class="fas fa-arrow-right mr-1"> </i>
                    下一题
                  </button>
                </div>
              </div>
            </div>
          </div>
          <!-- 批注区域 -->
          <div class="bg-white rounded-xl shadow-card p-5">
            <div class="flex justify-between items-center mb-4">
              <h3 class="text-lg font-semibold">添加批注</h3>
              <div class="flex space-x-2">
                <button
                  class="p-2 rounded-lg hover:bg-neutral-100 transition-colors text-neutral-600"
                  title="加粗"
                >
                  <i class="fas fa-bold"> </i>
                </button>
                <button
                  class="p-2 rounded-lg hover:bg-neutral-100 transition-colors text-neutral-600"
                  title="斜体"
                >
                  <i class="fas fa-italic"> </i>
                </button>
                <button
                  class="p-2 rounded-lg hover:bg-neutral-100 transition-colors text-neutral-600"
                  title="下划线"
                >
                  <i class="fas fa-underline"> </i>
                </button>
                <button
                  class="p-2 rounded-lg hover:bg-neutral-100 transition-colors text-neutral-600"
                  title="公式"
                >
                  <i class="fas fa-superscript"> </i>
                </button>
                <button
                  class="p-2 rounded-lg hover:bg-neutral-100 transition-colors text-neutral-600"
                  title="代码"
                >
                  <i class="fas fa-code"> </i>
                </button>
              </div>
            </div>
            <textarea
              placeholder="请输入批注内容..."
              rows="4"
              class="w-full p-3 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary resize-none"
            >
            </textarea>
            <div class="mt-3 flex justify-end">
              <button
                class="px-4 py-2 rounded-lg bg-primary text-white hover:bg-primary/90 transition-colors flex items-center"
              >
                <i class="fas fa-comment-dots mr-1"> </i>
                添加批注
              </button>
            </div>
            <!-- 已有批注 -->
            <div class="mt-5">
              <h4 class="text-neutral-700 font-medium mb-3">已有批注 (2)</h4>
              <div class="space-y-3">
                <div
                  class="p-3 bg-neutral-50 rounded-lg border border-neutral-200"
                >
                  <div class="flex justify-between items-start mb-1">
                    <div class="flex items-center">
                      <img
                        src="https://design.gemcoder.com/staticResource/echoAiSystemImages/9bd230fd093facfce7f2c7b995073c92.png"
                        alt="用户头像"
                        class="w-6 h-6 rounded-full object-cover mr-2"
                      />
                      <span class="text-sm font-medium"> 王老师 </span>
                    </div>
                    <span class="text-xs text-neutral-500"> 今天 10:23 </span>
                  </div>
                  <p class="text-sm">
                    物理层的描述过于简单，应补充具体功能如电压规范、接口标准等。
                  </p>
                </div>
                <div
                  class="p-3 bg-neutral-50 rounded-lg border border-neutral-200"
                >
                  <div class="flex justify-between items-start mb-1">
                    <div class="flex items-center">
                      <img
                        src="https://design.gemcoder.com/staticResource/echoAiSystemImages/9bd230fd093facfce7f2c7b995073c92.png"
                        alt="用户头像"
                        class="w-6 h-6 rounded-full object-cover mr-2"
                      />
                      <span class="text-sm font-medium"> 王老师 </span>
                    </div>
                    <span class="text-xs text-neutral-500"> 今天 10:25 </span>
                  </div>
                  <p class="text-sm">
                    网络层部分缺少对主要协议的说明，如IP协议的作用。
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- 右侧：批改辅助区 (25%) -->
      <section
        class="w-1/4 bg-white border-l border-neutral-300 flex flex-col h-[calc(100vh-64px)] overflow-hidden"
      >
        <!-- 辅助工具栏 -->
        <div
          class="p-3 border-b border-neutral-300 bg-neutral-50 flex items-center"
        >
          <div class="flex space-x-1">
            <button
              class="px-3 py-1.5 rounded-md bg-primary text-white text-sm font-medium"
            >
              评分标准
            </button>
            <button
              class="px-3 py-1.5 rounded-md hover:bg-neutral-200 text-neutral-600 text-sm transition-colors"
            >
              相似答案
            </button>
            <button
              class="px-3 py-1.5 rounded-md hover:bg-neutral-200 text-neutral-600 text-sm transition-colors"
            >
              批量批改
            </button>
          </div>
        </div>
        <!-- 评分标准 -->
        <div class="flex-1 overflow-y-auto p-4">
          <div
            class="bg-neutral-50 p-4 rounded-lg border border-neutral-200 mb-6"
          >
            <h3 class="text-lg font-semibold mb-3">评分标准</h3>
            <div class="space-y-3 text-sm">
              <div class="flex items-start">
                <div
                  class="flex-shrink-0 w-6 h-6 rounded-full bg-success/20 text-success flex items-center justify-center mr-2 mt-0.5"
                >
                  <i class="fas fa-check text-xs"> </i>
                </div>
                <div>
                  <span class="font-medium"> 16-20分： </span>
                  <span class="text-neutral-600">
                    完整描述七层模型的名称、顺序和各层主要功能，内容准确详细，包含关键协议和技术。
                  </span>
                </div>
              </div>
              <div class="flex items-start">
                <div
                  class="flex-shrink-0 w-6 h-6 rounded-full bg-primary/20 text-primary flex items-center justify-center mr-2 mt-0.5"
                >
                  <i class="fas fa-check text-xs"> </i>
                </div>
                <div>
                  <span class="font-medium"> 11-15分： </span>
                  <span class="text-neutral-600">
                    正确描述七层模型的名称和顺序，各层功能描述基本准确但不够详细，缺少部分关键技术点。
                  </span>
                </div>
              </div>
              <div class="flex items-start">
                <div
                  class="flex-shrink-0 w-6 h-6 rounded-full bg-warning/20 text-warning flex items-center justify-center mr-2 mt-0.5"
                >
                  <i class="fas fa-check text-xs"> </i>
                </div>
                <div>
                  <span class="font-medium"> 6-10分： </span>
                  <span class="text-neutral-600">
                    能描述大部分层次的名称和基本功能，但存在顺序错误或功能描述不准确的情况。
                  </span>
                </div>
              </div>
              <div class="flex items-start">
                <div
                  class="flex-shrink-0 w-6 h-6 rounded-full bg-danger/20 text-danger flex items-center justify-center mr-2 mt-0.5"
                >
                  <i class="fas fa-check text-xs"> </i>
                </div>
                <div>
                  <span class="font-medium"> 0-5分： </span>
                  <span class="text-neutral-600">
                    仅能描述少数层次，或存在严重错误，对OSI模型理解不足。
                  </span>
                </div>
              </div>
            </div>
          </div>
          <!-- AI评分建议 -->
          <div
            class="bg-white p-4 rounded-lg border border-neutral-200 shadow-card mb-6"
          >
            <div class="flex justify-between items-center mb-3">
              <h3 class="text-lg font-semibold flex items-center">
                <i class="fas fa-robot text-primary mr-2"> </i>
                AI评分建议
              </h3>
              <button class="text-xs text-primary hover:underline">隐藏</button>
            </div>
            <div class="text-sm space-y-3">
              <div class="flex items-center justify-between mb-2">
                <span class="text-neutral-600"> 建议分数： </span>
                <span class="font-medium text-primary"> 13-15分 </span>
              </div>
              <div class="bg-neutral-50 p-3 rounded-lg text-neutral-700">
                <p class="mb-2">
                  <span class="font-medium"> 评分分析： </span>
                  考生正确描述了OSI七层模型的名称和顺序，但各层功能描述较为简略，缺少对关键协议的说明。物理层和数据链路层的描述不够准确。
                </p>
                <p>
                  <span class="font-medium"> 改进建议： </span>
                  应补充各层关键协议的说明，如网络层的IP协议、传输层的TCP/UDP协议等，并详细描述物理层的具体功能。
                </p>
              </div>
              <button
                class="w-full mt-2 py-1.5 text-sm text-primary border border-primary/30 rounded-lg hover:bg-primary/5 transition-colors"
              >
                应用建议分数
              </button>
            </div>
          </div>
          <!-- 快捷键指南 -->
          <div
            class="bg-white p-4 rounded-lg border border-neutral-200 shadow-card"
          >
            <h3 class="text-lg font-semibold mb-3">快捷键指南</h3>
            <div class="grid grid-cols-2 gap-2 text-sm">
              <div class="flex items-center">
                <span
                  class="px-2 py-1 bg-neutral-100 rounded text-neutral-700 text-xs mr-2"
                >
                  Ctrl+S
                </span>
                <span class="text-neutral-600"> 保存 </span>
              </div>
              <div class="flex items-center">
                <span
                  class="px-2 py-1 bg-neutral-100 rounded text-neutral-700 text-xs mr-2"
                >
                  →
                </span>
                <span class="text-neutral-600"> 下一题 </span>
              </div>
              <div class="flex items-center">
                <span
                  class="px-2 py-1 bg-neutral-100 rounded text-neutral-700 text-xs mr-2"
                >
                  ←
                </span>
                <span class="text-neutral-600"> 上一题 </span>
              </div>
              <div class="flex items-center">
                <span
                  class="px-2 py-1 bg-neutral-100 rounded text-neutral-700 text-xs mr-2"
                >
                  Ctrl+Enter
                </span>
                <span class="text-neutral-600"> 提交 </span>
              </div>
              <div class="flex items-center">
                <span
                  class="px-2 py-1 bg-neutral-100 rounded text-neutral-700 text-xs mr-2"
                >
                  Ctrl+B
                </span>
                <span class="text-neutral-600"> 加粗 </span>
              </div>
              <div class="flex items-center">
                <span
                  class="px-2 py-1 bg-neutral-100 rounded text-neutral-700 text-xs mr-2"
                >
                  Ctrl+I
                </span>
                <span class="text-neutral-600"> 斜体 </span>
              </div>
              <div class="flex items-center">
                <span
                  class="px-2 py-1 bg-neutral-100 rounded text-neutral-700 text-xs mr-2"
                >
                  Ctrl+0
                </span>
                <span class="text-neutral-600"> 零分 </span>
              </div>
              <div class="flex items-center">
                <span
                  class="px-2 py-1 bg-neutral-100 rounded text-neutral-700 text-xs mr-2"
                >
                  Ctrl+M
                </span>
                <span class="text-neutral-600"> 满分 </span>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
    <!-- 底部状态栏 -->
    <footer
      class="bg-white border-t border-neutral-300 py-2 px-4 text-sm text-neutral-600 flex justify-between items-center"
    >
      <div>
        <span> 自动保存： </span>
        <span class="text-success">
          <i class="fas fa-check-circle mr-1"> </i>
          刚刚
        </span>
      </div>
      <div>
        <span> 批改进度： </span>
        <span class="font-medium"> 3/5题 </span>
      </div>
      <div>
        <span> 上次活动： </span>
        <span> 今天 10:45 </span>
      </div>
    </footer>
    <!-- JavaScript -->
    <script>
      // 页面加载时初始化
      document.addEventListener('DOMContentLoaded', function () {
        // 初始化自动保存功能
        initAutoSave();

        // 初始化键盘快捷键
        initKeyboardShortcuts();

        // 初始化题目导航交互
        initQuestionNavigation();

        // 初始化评分滑块交互
        initScoreSlider();
      });

      // 自动保存功能
      function initAutoSave() {
        var saveTimeout;

        // 监听输入变化
        var inputElements = document.querySelectorAll('input, textarea, select');
        inputElements.forEach(function (element) {
          element.addEventListener('input', function () {
            clearTimeout(saveTimeout);

            // 5秒后自动保存
            saveTimeout = setTimeout(function () {
              // 模拟保存操作
              console.log('自动保存中...');

              // 更新状态栏保存时间
              var saveStatus = document.querySelector('footer .text-success');
              saveStatus.innerHTML = `
      <i class=\"fas fa-check-circle mr-1\">
      </i> \u521A\u521A
      `;
            }, 5000);
          });
        });
      }

      // 键盘快捷键
      function initKeyboardShortcuts() {
        document.addEventListener('keydown', function (e) {
          // Ctrl+S 保存
          if (e.ctrlKey && e.key === 's') {
            e.preventDefault();
            document.querySelector('button:has(.fa-save)').click();
            showNotification('已保存批改进度');
          }

          // 右箭头 下一题
          if (e.key === 'ArrowRight' && document.activeElement.tagName !== 'INPUT') {
            var nextButton = document.querySelector('button:has(.fa-arrow-right)');
            if (nextButton) nextButton.click();
          }

          // Ctrl+Enter 提交
          if (e.ctrlKey && e.key === 'Enter') {
            e.preventDefault();
            document.querySelector('button:has(.fa-save)').click();
            showNotification('已提交批改结果');
          }

          // Ctrl+0 零分
          if (e.ctrlKey && e.key === '0') {
            e.preventDefault();
            var scoreInput = document.querySelector('input[type="number"]');
            if (scoreInput) {
              scoreInput.value = 0;
              updateScoreSlider(0);
            }
          }

          // Ctrl+M 满分
          if (e.ctrlKey && e.key === 'm') {
            e.preventDefault();
            var _scoreInput = document.querySelector('input[type="number"]');
            if (_scoreInput) {
              var maxScore = parseInt(_scoreInput.max);
              _scoreInput.value = maxScore;
              updateScoreSlider(maxScore);
            }
          }
        });
      }

      // 题目导航交互
      function initQuestionNavigation() {
        var questionButtons = document.querySelectorAll('.flex.items-center.space-x-1 button:not(:last-child)');
        questionButtons.forEach(function (button) {
          button.addEventListener('click', function () {
            // 移除所有按钮的选中状态
            questionButtons.forEach(function (btn) {
              btn.classList.remove('bg-warning/20', 'text-warning', 'ring-2', 'ring-warning/30');
              btn.classList.add('bg-neutral-200', 'text-neutral-600');
            });

            // 设置当前按钮为选中状态
            button.classList.remove('bg-neutral-200', 'text-neutral-600');
            button.classList.add('bg-warning/20', 'text-warning', 'ring-2', 'ring-warning/30');

            // 模拟加载题目
            showNotification("\u6B63\u5728\u52A0\u8F7D\u7B2C".concat(button.textContent, "\u9898..."));
          });
        });
      }

      // 评分滑块交互
      function initScoreSlider() {
        var scoreSlider = document.querySelector('input[type="range"]');
        var scoreInput = document.querySelector('input[type="number"]');
        if (scoreSlider && scoreInput) {
          // 滑块更新输入框
          scoreSlider.addEventListener('input', function () {
            scoreInput.value = scoreSlider.value;
            checkScoreWarning();
          });

          // 输入框更新滑块
          scoreInput.addEventListener('input', function () {
            // 确保值在有效范围内
            var value = parseInt(scoreInput.value) || 0;
            value = Math.min(Math.max(value, parseInt(scoreInput.min)), parseInt(scoreInput.max));
            scoreInput.value = value;
            scoreSlider.value = value;
            checkScoreWarning();
          });
        }
      }

      // 更新评分滑块
      function updateScoreSlider(value) {
        var scoreSlider = document.querySelector('input[type="range"]');
        var scoreInput = document.querySelector('input[type="number"]');
        if (scoreSlider && scoreInput) {
          scoreInput.value = value;
          scoreSlider.value = value;
          checkScoreWarning();
        }
      }

      // 分数异常检查
      function checkScoreWarning() {
        var scoreInput = document.querySelector('input[type="number"]');
        if (!scoreInput) return;
        var score = parseInt(scoreInput.value);
        var maxScore = parseInt(scoreInput.max);
        var warningThreshold = maxScore * 0.3; // 低于30%分数警告

        if (score <= warningThreshold && score > 0) {
          scoreInput.classList.add('border-danger');
          scoreInput.classList.remove('border-neutral-300');
        } else {
          scoreInput.classList.remove('border-danger');
          scoreInput.classList.add('border-neutral-300');
        }
      }

      // 显示通知
      function showNotification(message) {
        // 检查是否已有通知存在
        var notification = document.querySelector('.notification-toast');
        if (!notification) {
          // 创建通知元素
          notification = document.createElement('div');
          notification.className = 'notification-toast fixed bottom-4 right-4 bg-neutral-800 text-white px-4 py-2 rounded-lg shadow-lg flex items-center z-50 transform translate-y-20 opacity-0 transition-all duration-300';
          notification.innerHTML = `
      <i class=\"fas fa-info-circle mr-2\">
      </i>
      <span class=\"message\">
      </span>
      `;
          document.body.appendChild(notification);
        }

        // 更新通知内容
        notification.querySelector('.message').textContent = message;

        // 显示通知
        notification.classList.remove('translate-y-20', 'opacity-0');

        // 3秒后隐藏
        setTimeout(function () {
          notification.classList.add('translate-y-20', 'opacity-0');
        }, 3000);
      }
    </script>
  </body>
</html>
